<!--# layout("/common/mallout.html",{"jsBase":"/js/user/userMessage/"}){ -->
<link rel="stylesheet" href="http://ziyunoss.oss-cn-hangzhou.aliyuncs.com/pop/mall/style/member.css">
<link rel="stylesheet" href="http://ziyunoss.oss-cn-hangzhou.aliyuncs.com/pop/mall/style/page.css">
<script src="http://ziyunoss.oss-cn-hangzhou.aliyuncs.com/pop/mall/style/library.js"></script>
<input type="hidden" id="type" name="type" value="0"> 
<body>
    <div class="h_banner">
        <div class="h_container">
            <div class="h_container_head">
                <div class="h_message">
                    <span>站内消息</span>
                  <select name="readStatus" class="readStatus " id="readStatus">
                            <option value="0">全部</option>
                            <option value="1">未读</option>
                   </select>
                </div>
                <div class="h_sign">
                    <a href="javascript:;" class="read" id="read">标为已读</a>
                    <a href="javascript:;" class="del" id="del">删除</a>
                    <a href="javascript:;" class="delAll" id="delAll">全部清空</a>
                </div>
            </div>
            <!-- 表格开始 -->
            <div class="h_form">
                <table>
                    <thead>
                        <tr>
                            <td style="width:120px; height:60px;line-height:60px;font-size: 16px;">
                                <label for="">
                                    <i class="select_all"></i>
                                    
                                </label>
                            </td>
                            <td style="width:240px; height:60px;line-height:60px;font-size: 16px;"><span>发布时间</span></td>
                            <td style="width:240px; height:60px;line-height:60px;font-size: 16px;"><span>消息标题</span></td>
                            <td style="width:596px; height:60px;line-height:60px;font-size: 16px;"><span>消息内容</span></td>
                        </tr>
                    </thead>
                    <tbody class="area_mood_tanle">
                    </tbody>
                </table>
            </div>
            <div class='boxDiv'>
<div class="box">分页内容要显示的地方</div>
</div>
        </div>
    </div>
</body>
    

<!--#} -->
<script >
	this.pageing();
	$(document).on('change', '#readStatus',function(){
		var readStatus=$("#readStatus").val();
		pageing(readStatus)
	})
function pageing(type){
	doAjax('/user/userMessage/loadMessage.json', 'post',{"type":type}, function(ret){
		if(ret.code=='200'){
			var total=ret.data.total;//总数据数量
			var totalPage=ret.data.totalPage;//总页数
			var current=ret.data.current;//第几页
			var size=ret.data.size;//每页数量
	        $(function(){
		    	 var option={
		    	         pageNo:  current, // 初始页码
		    	         totalPages:  totalPage, //总页数
		    	         totalCount:  total, // 条目总数
		    	         slideSpeed:  600, // 缓动速度
		    	         jump:true, // 支持跳转
		    	         callback: function(page) {
		    	        	 showMessage(type,page);
		    	             //根据当前页查数据
		    	         } // 回调函数
		    	     }
		    	     $(".box").paging(option);
		    	  })
		}
	})
}
function showMessage(type,pageNo) {
    doAjax('/user/userMessage/loadMessage.json','post',{"pageNo":pageNo,"type":type},function(res){
       if(res.code=='200'){
    	var userMessageList=res.data.records;
   		var total=res.data.total;//总数据数
   		var userMessageHtml="";
   		$(".area_mood_tanle").empty();
   	 	for(var i=0;i<userMessageList.length;i++){
	    	var userMessage=userMessageList[i];
	    	userMessageHtml+='<tr>'
	    				+'<td style="width:120px; height:60px;line-height:60px;font-size: 14px;">'
	    				+'<label for="">';
			if(!userMessage.readStatus){
				userMessageHtml+='<span class="circle"></span>';
			}
	    	userMessageHtml+=' <i class="select_alls" messageId="'+userMessage.messageId+'"></i>'
	    				+'</label>'
	    				+' </td>'
	    				+'<td style="width:240px; height:60px;line-height:60px;font-size: 14px;">'+userMessage.createTime+'</span></td>'
	    				+'<td style="width:240px; height:60px;line-height:60px;font-size: 14px;"><span>'+userMessage.title+'</span></td>'
	    				+'<td style="width:596px; height:60px;line-height:60px;font-size: 14px;"><span><a href="/user/userMessage/readMessage.do?messageId='+userMessage.messageId+'">'+userMessage.comment+'</a></span></td>'
		          		+'</tr>';
	    }
	    $('.area_mood_tanle').append(userMessageHtml);
       }
        
    },'');
}	

	$(document).on('click','.select_alls',function(){
		if(!$(this).hasClass('active')){
			$(this).addClass('active');
		}else{
			$(this).removeClass('active');
			$('.select_all').removeClass('active');
		}
		
	 });
	//全选
	$(document).on('click','.select_all',function(){
		if(!$(this).hasClass('active')){
			$(this).addClass('active');
			$('.select_alls').addClass('active');
		}else{
			$(this).removeClass('active');
			$('.select_alls').removeClass('active');
		}
	 });
    $(document).on('click','.read',function(){
		var messageIds='';
		 $('.select_alls').each(function(i,o){
			 if($(this).hasClass('active')){
				 var messageId=$(this).attr('messageId');
					 messageIds+=','+messageId;
			 }
	      })
	      if(messageIds){
	    	  messageIds = messageIds.substr(1);
	    	  doAjax('/user/userMessage/saveBatchMessageStatus.json','post',{'messageIds':messageIds},function(res){
				   if(res.code=='200'){
					 showMessage();
				   }
			   })
	      }else{
	    	  $.alert('error',"请选择消息！");
	      }
		
	 });
    //刪除
    $(document).on('click','.del',function(){
    	var messageIds='';
		 $('.select_alls').each(function(i,o){
			 if($(this).hasClass('active')){
				 var messageId=$(this).attr('messageId');
					 messageIds+=','+messageId;
			 }
	      })
	      if(messageIds){
	    	  messageIds = messageIds.substr(1);
	    	  doAjax('/user/userMessage/delMessage.json','post',{'messageIds':messageIds},function(res){
				   if(res.code=='200'){
					 showMessage();
				   }
			   })
	      }else{
	    	  $.alert('error',"请选择消息！");
	      }
		 
		
	 });
    $(document).on('click','.delAll',function(){
    	 $.confirm('友情提示', '确定清空消息？', function () {
  		   doAjax('/user/userMessage/clearMessage.json','post','',function(res){
  			   if(res.code=='200'){
  				 showMessage();
  			   }
  		   })
  	   })
		
	 });
   
</script>


<style>

* {
    margin: 0;
    padding: 0;
}
.h_banner {
    width: 100%;
    height: 800px;
    background-color: #f4f4f4;
}
.h_container {
    width: 1200px;
    height: 800px;
    margin: auto;

}
.h_container_head {
    width: 1200px;
    height: 70px;
}
.h_message {
    width: 200px;
    height: 70px;
    float: left;
}
.h_message span {
    line-height: 70px;
    font-size: 20px;
    margin-left: 30px;
    
}
.h_message a {
    color: #614e90;
    text-decoration: none;
    font-size: 18px;
}
.h_message a i {
    border-color: #614e90 #f4f4f4 #f4f4f4;
    border-style: solid dashed dashed;
    border-width: 6px 6px 0;
    font-size: 0;
    height: 0;
    line-height: 0;
    margin-left: 4px;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}

.readStatus  {
    width: 60px;
    height: 30px;
    background: #f4f4f4;
    font-size: 16px;
    vertical-align: inherit;
}
.h_sign {
    width: 260px;
    height: 70px;
    float: right;
}
.read {
    display: inline-block;
    width: 70px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin-top: 30px;
    border: 2px solid #614e90;
    text-decoration: none;
    color: #614e90;
    margin-left: 30px;
    font-size: 15px;
    border-radius: 5px;
}
.del {
    display: inline-block;
    width: 40px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background-color: #B898FF;
    font-size: 15px;
    border-radius: 5px;
    margin: 0 18px;
}
.delAll {
    width: 70px;
    height: 30px;
    line-height: 30px;
    display: inline-block;
    text-align: center;
    background: #B898FF;
    color: #fff;
    border-radius: 5px;
}
.h_form {
    width: 1200px;
}
.h_form table thead {
    display: block;
    width: 1200px;
    height: 60px;
    background-color: #fff;
    margin-bottom: 10px;
    border: none;
}
td {
    display: inline-block;
}
.h_form table tbody {
    background-color: #fff;
}
.select_all {
    display: inline-block;
    width: 28px;
    height: 22px;
    background: url(https://ziyunoss.oss-cn-hangzhou.aliyuncs.com/pop%2Fmall%2Fimage%2Fzy_img_02.png) -129px -115px no-repeat;
    vertical-align: text-bottom;
    cursor: pointer;
    margin-left:50px;
}
.select_alls {
    display: inline-block;
    width: 28px;
    height: 22px;
    background: url(https://ziyunoss.oss-cn-hangzhou.aliyuncs.com/pop%2Fmall%2Fimage%2Fzy_img_02.png) -129px -115px no-repeat;
    vertical-align: text-bottom;
    cursor: pointer;
    position: absolute;
    left: 50px;
    top: 20px;

}
.circle {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: red;
    border-radius: 50%;
    margin-left: 20px;
}
.active {
    display: inline-block;
    width: 28px;
    height: 22px;
    background: url(https://ziyunoss.oss-cn-hangzhou.aliyuncs.com/pop%2Fmall%2Fimage%2Fzy_img_02.png) -129px -64px no-repeat;
    vertical-align: text-bottom;
    cursor: pointer;
}
tbody tr td:nth-child(1) {
    position: relative;
}
tbody tr td span a {
    width: 596px;
    display: block;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}


</style>


